<template>
    <Modal
            v-model="showModal"
            :width=width
            height="height"
            :title="title"
            :ok-text="okText"
            :mask-closable="maskClosable"
            :draggable="draggable"
            :mask="mask"
            @on-visible-change="handleVisibleChange"
            @on-ok="ok"
            @on-cancel="cancel"
    >
        <slot name="content"></slot>

    </Modal>

</template>

<script>
    export default {
        name: 'DetailModal',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default:'新增页面'
            },
            width: {
                type: Number
            },
            loading: {
                type: Boolean,
                default: false
            },
            okText:{
                type: String,
                default:'保存'
            },
            maskClosable: {
                type: Boolean,
                default: false
            },
            draggable: {
                type: Boolean,
                default: false
            },
            mask: {
                type: Boolean,
                default: true
            },
            height: {
                type: Number
            }
        },
        watch: {
            value (nv) {
                this.showModal = nv;

                let modalHeight = this.$store.state.app.contentHeight;
                if (this.height === undefined) {
                    // todo
                }else {
                    modalHeight = this.height;
                }

                let elc = document.getElementsByClassName("ivu-modal-body")[0];
                elc.style.height = modalHeight + "px";
                elc.style.overflow = "auto";
            }
        },
        created() {

        },
        data () {
            return {
                showModal: false,
            }
        },
        methods: {
            cancel: function () {
                this.$emit('on-cancel');
            },
            ok () {
                this.$emit('on-ok');
            },
            handleVisibleChange (val) {
                this.$emit('input', val)
            }
        },
        mounted () {
            this.showModal = this.value;
        },
        computed:{

        }
    }

    // 设置样式
    // let elc= document.getElementsByClassName("ivu-modal-body");
    // console.log(elc)
    // elc.style.color="blue";
</script>

<style scoped>

</style>